<!-- 客户进货管理 -->
<div class="card">
    <div class="card-header">
    <i class="bi bi-truck me-2"></i>
    进货通知管理
    </div>
    <div class="card-body">
      <!-- 搜索表单 -->
      <form (ngSubmit)="search()">
      <div class="row g-3">
          <div class="col-md-3">
            <div class="form-group">
            <label><i class="bi bi-file-text me-1"></i>采购订单号</label>
            <input type="text" class="form-control" [(ngModel)]="filter.purchaseOrderNo" name="purchaseOrderNo" placeholder="请输入采购订单号">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
            <label><i class="bi bi-cart me-1"></i>客户订单号</label>
            <input type="text" class="form-control" [(ngModel)]="filter.customerOrderNo" name="customerOrderNo" placeholder="请输入客户订单号">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
            <label><i class="bi bi-truck me-1"></i>车号</label>
            <input type="text" class="form-control" [(ngModel)]="filter.carNo" name="carNo" placeholder="请输入车号">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
            <label><i class="bi bi-person me-1"></i>司机</label>
            <input type="text" class="form-control" [(ngModel)]="filter.driverName" name="driverName" placeholder="请输入司机姓名">
          </div>
        </div>
          <div class="col-md-3">
            <div class="form-group">
            <label><i class="bi bi-telephone me-1"></i>司机电话</label>
            <input type="text" class="form-control" [(ngModel)]="filter.driverPhone" name="driverPhone" placeholder="请输入司机电话">
            </div>
          </div>
          <div class="col-md-3">
             <div class="form-group">
            <label><i class="bi bi-calendar me-1"></i>预计到货时间(起)</label>
              <input type="date" class="form-control" [(ngModel)]="filter.expectedArrivalDateFrom" name="expectedArrivalDateFrom">
            </div>
          </div>
           <div class="col-md-3">
             <div class="form-group">
            <label><i class="bi bi-calendar me-1"></i>预计到货时间(止)</label>
              <input type="date" class="form-control" [(ngModel)]="filter.expectedArrivalDateTo" name="expectedArrivalDateTo">
            </div>
          </div>
          <div class="col-md-3">
            <div class="form-group">
            <label><i class="bi bi-list-check me-1"></i>单据状态</label>
              <select class="form-control" [(ngModel)]="filter.status" name="status">
                <option [ngValue]="undefined">全部</option>
                <option value="计划中">计划中</option>
                <option value="已完成">已完成</option>
              </select>
            </div>
          </div>
        </div>

      <!-- 按钮组 -->
      <div class="row mt-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
          <div class="action-buttons">
            <button type="button" class="btn btn-primary" (click)="create()">
              <i class="bi bi-plus-lg"></i>
              <span>录入</span>
              </button>
            <button type="button" class="btn btn-success ms-2" (click)="viewDetails()" [disabled]="selected.length !== 1">
              <i class="bi bi-info-circle"></i>
              <span>查看</span>
              </button>
            </div>
          <div class="search-buttons">
            <button type="submit" class="btn btn-info">
              <i class="bi bi-search"></i>
              <span>查询</span>
              </button>
            <button type="button" class="btn btn-secondary ms-2" (click)="reset()">
              <i class="bi bi-arrow-clockwise"></i>
              <span>重置</span>
              </button>
            </div>
          </div>
        </div>
      </form>
      
      <hr>
  
      <!-- 数据表格 -->
      <ngx-datatable
        class="material"
        [rows]="goods"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [count]="totalCount"
        [externalPaging]="true"
        [externalSorting]="true"
        [limit]="pageSize"
        [offset]="pageNumber"
        (page)="onPage($event)"
        (sort)="onSort($event)"
        [selectionType]="'checkbox'"
        (select)="onSelect($event)"
        [selected]="selected"
      >
        <ngx-datatable-column
          [width]="50"
          [sortable]="false"
          [canAutoResize]="false"
          [draggable]="false"
          [resizeable]="false"
          [headerCheckboxable]="true"
          [checkboxable]="true"
        >
        </ngx-datatable-column>
      <ngx-datatable-column name="创建人" prop="creatorName">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <i class="bi bi-person-badge me-1"></i>{{ row.creatorName }}
        </ng-template>
      </ngx-datatable-column>
        <ngx-datatable-column name="创建日期" prop="creationTime">
          <ng-template let-value="value" ngx-datatable-cell-template>
          <i class="bi bi-calendar-date me-1"></i>{{ value | date: 'yyyy-MM-dd' }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="进货通知单号" prop="purchaseOrderNo">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <i class="bi bi-file-text me-1"></i>{{ row.purchaseOrderNo }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="供应商编码" prop="supplierCode">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <i class="bi bi-building me-1"></i>{{ row.supplierCode }}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="预计到货时间" prop="estimatedArrivalTime">
          <ng-template let-value="value" ngx-datatable-cell-template>
          <i class="bi bi-clock me-1"></i>{{ value | date: 'yyyy-MM-dd HH:mm:ss' }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="客户订单号" prop="customerOrderNo">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <i class="bi bi-cart me-1"></i>{{ row.customerOrderNo }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="车号" prop="carNo">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <i class="bi bi-truck me-1"></i>{{ row.carNo }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="司机" prop="driverName">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <i class="bi bi-person me-1"></i>{{ row.driverName }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="司机电话" prop="driverPhone">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <i class="bi bi-telephone me-1"></i>{{ row.driverPhone }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="备注" prop="remarks">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <i class="bi bi-chat-left-text me-1"></i>{{ row.remarks }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="单据状态" prop="status">
        <ng-template let-row="row" ngx-datatable-cell-template>
          <span class="badge" [ngClass]="{'badge-warning': row.status === '计划中', 'badge-success': row.status === '已完成'}">
            <i class="bi" [ngClass]="{'bi-hourglass-split': row.status === '计划中', 'bi-check-circle': row.status === '已完成'}"></i>
            {{ row.status }}
          </span>
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>
    </div>
  </div>